<template>
  <div>
    <el-row v-if="progressShow" style="margin-top: 10px">
      <el-progress class="el-col-7" :percentage="authProgress"></el-progress>
    </el-row>
    <div v-show="video">
      <el-button size="mini" @click="handleReUpload" type="primary">重新上传</el-button>
      <el-button size="mini" @click="handlePreview">预览</el-button>
    </div>

    <el-row v-show="!video&&!progressShow">
      <el-upload class="avatar-uploader common-uploader"
                 :action="uploadUrl"
                 :show-file-list="false"
                 :before-upload="beforeUploadVideo"
                 :http-request="uploads">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="form-item-tip">上传支持mp4格式</div>
    </el-row>
    <slot></slot>
    <el-dialog
      title="预览"
      :visible.sync="dialogVideo"
      width="50%"
      :before-close="beforeClose">
      <div class="tx-c" ref="video">
        <video v-if="playUrl" controls="" autoplay="" name="media" style="width: 100%">
          <source :src="playUrl" type="audio/mpeg">
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import qnUpload from '@/utils/qiniu'

  export default {
    name: 'VideoUpload',
    data() {
      return {
        dialogVideo: false,
        videoId: '',
        playUrl: '',
        file: null,
        authProgress: 0,
        progressShow:false
      }
    },
    props: {
      video: {
        type: String,
        default: ''
      },
      uploadUrl: {
        type: String,
        default: 'https://'
      },
      uploadFrom: {
        type: String,
        default: ''
      },
      isPrivate:{
        type:Boolean,
        default:false
      }
    },
    computed: {
      ...mapGetters([
        'enums'
      ]),
    },
    methods: {
      beforeClose(done){
        this.playUrl = ""
        done()
      },
      handleReUpload() {
        this.authProgress = 0
        this.videoId = ''
        this.coverUrl = ''
        this.handleSuccess('')
        this.progressShow = false
      },
      handleSuccess(url) {
        this.videoId = url
        this.$emit('upload-callback', this.videoId)
      },
      handleProgress(res){
        this.progressShow = true
        this.authProgress = Math.ceil(res.percent)
      },
      uploads(file) {
        const upload = {
          mediaType:'video',
          isPrivate:this.isPrivate,
          value:file,
          uploadTo:this.uploadFrom,
          uploadType:'normal',
          callback:{
            success:this.handleSuccess,
            progress:this.handleProgress
          }
        }
        qnUpload.upload(upload)
      },
      handlePreview() {
        if(this.isPrivate){
          qnUpload.getVideoPlayUrl(this.videoId).then(res => {
            this.playUrl = res
            this.dialogVideo = true
          })
        }else{
          this.playUrl = this.video||this.videoId
          this.dialogVideo = true
        }
      },
      beforeUploadVideo(file) {
        const isLt10M = file.size / 1024 / 1024 < 10
        const videoType = ['video/mp4', 'video/flv']
        if (videoType.indexOf(file.type) === -1) {
          this.$message.error('请上传正确的视频格式')
          return false
        }
      }
    }
  }
</script>

<style scoped>
  .common-uploader {
    line-height: 0;
  }

  .video-cover-img {
    width: 150px;
    max-height: 150px;
  }

</style>
<style lang="scss">
  .common-uploader {
    width: 122px;
    height: 122px;
    line-height: 12px;
    position: relative;

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }


    .avatar-uploader-icon {
      font-pageSize: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }


  }
</style>
